<template>
  <div id="app" style="width: 100%">
    <a-table
      :columns="headerLists"
      :data-source="tableDatas"
      :scroll="scrollData"
      :rowKey="'rowId'"
      bordered
    >
      <template slot="footer">
        <table
          class="footer-table"
          :style="'width:' + (this.scrollData.x - 0.5) + 'px'"
        >
          <colgroup>
            <!--              <col style="width: 80px; min-width: 80px;" />-->
            <col
              v-for="(item, index) in headerLists"
              :key="index"
              :style="colStyle(item)"
            />
          </colgroup>
          <tbody class="ant-table-tbody" style="position: relative">
          <tr v-if="tableDatas.length > 0">
            <td v-for="(item, index) in headerLists" :key="index">
              {{ tableDatas[0][item.dataIndex]}}
            </td>
          </tr>
          </tbody>
        </table>
      </template>
      <template slot="footer">
        <table
          class="footer-table1"
          :style="'width:' + (this.scrollData.x - 0.5) + 'px'"
        >
          <colgroup>
            <!--              <col style="width: 80px; min-width: 80px;" />-->
            <col
              v-for="(item, index) in headerLists"
              :key="index"
              :style="colStyle(item)"
            />
          </colgroup>
          <tbody class="ant-table-tbody" style="position: relative">
          <tr v-if="tableDatas.length > 0">
            <td
              v-show="item.fixed"
              v-for="(item, index) in headerLists"
              :key="index"

              style="background: #fafafa;"
            >
              {{ tableDatas[0][item.dataIndex]}}
            </td>
          </tr>
          </tbody>
        </table>
      </template>
    </a-table>
  </div>
</template>

<script>

export default {
  name: 'App',
  components: {
  },
  data(){
    return{
      headerLists:[
        {
          title: '组织',
          dataIndex: 'area',
          key: 'area',
          scopedSlots: { customRender: 'link' },
          width: 110,
          fixed: 'left'
        },
        {
          title: '供货目标',
          dataIndex: 'supplyTarget',
          key: 'supplyTarget',
          scopedSlots: { customRender: '亿' }
          // width: 60
        },
        {
          title: '供货货值',
          dataIndex: 'supplyActual',
          key: 'supplyActual',
          scopedSlots: { customRender: '亿' }
          // width: 50
        },
        {
          title: '供货偏差',
          dataIndex: 'supplyGap',
          key: 'supplyGap',
          scopedSlots: { customRender: '亿' },
          sorter: (a, b) => {
            return a.supplyGap.value - b.supplyGap.value;
          }
          // width: 70
        },
        {
          title: '供货完成率',
          dataIndex: 'supplyCompletionRate',
          key: 'supplyCompletionRate',
          scopedSlots: { customRender: '%' },
          sorter: (a, b) => {
            return (
              (a.supplyCompletionRate.value == '--'
                ? 0
                : a.supplyCompletionRate.value) -
              (b.supplyCompletionRate.value == '--'
                ? 0
                : b.supplyCompletionRate.value)
            );
          }
          // width: 80
        }
      ],
      tableDatas:[{"area":"合计","areaCode":"HR000282","areaType":"2","supplyTarget":"7961","supplyActual":"454.52","supplyGap":"453.72","supplyCompletionRate":"57092","key":1,"keyId":1},{"area":"浙北","areaCode":"HR000282","areaType":"2","supplyTarget":"7961","supplyActual":"454.52","supplyGap":"453.72","supplyCompletionRate":"57092","key":1,"keyId":1}],
      scrollData:{x:500,y:500}
    }
  },
  mounted() {
    this.addTfootData();
  },
  methods:{
    // 表尾col处理宽度
    colStyle(item) {
      if (item.width) {
        return 'width: ' + item.width + 'px; min-width: ' + item.width + 'px;';
      }
    },
    // 添加表尾数据
    addTfootData() {
      let table_bodys = document.getElementsByClassName('ant-table-scroll');
      let table_footers = document.getElementsByClassName('ant-table-footer');
    
      console.log(table_bodys)
      
      for (let i = 0; i < table_bodys.length; i++) {
        if (table_bodys[i] && table_footers[i]) {
          table_bodys[i].children[1].onscroll = () => {
            console.log(table_bodys[i].scrollLeft)
            table_footers[i].scrollLeft = table_bodys[i].children[1].scrollLeft;
          };
          table_footers[0].onscroll = () => {
            table_bodys[0].children[1].scrollLeft = table_footers[0].scrollLeft;
          };
        }
      }
    },
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.ant-table .ant-table-thead > tr > th, .ant-table .ant-table-tbody > tr > td {
  padding: 4px 10px;
  font-size: 0.9rem;
  text-align: center;
}
.ant-table-footer{
  position: static !important;
  padding: 0 !important;
  overflow: auto;
}
.ant-table-thead > tr > th,
.ant-table-tbody > tr > td {
  padding: 4px 10px;
  font-size: 0.9rem;
  text-align: center;
}
.ant-table-tbody > tr > td {
  color: #aaa;
}

.anticon {
  font-size: 0.7rem !important;
}


.ant-table-scroll {
  position: relative;
}
.ant-table-scroll .footer-table1{
  position: absolute;
  bottom: 0;

}
</style>


